<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import useMemberStore from "@/pinia/memberStore.ts";
import {storeToRefs} from "pinia";

const memberStore = useMemberStore()

const {orderListInfo, personList, orderStatusList} = storeToRefs(memberStore)

const loading = ref(false)
const pageParams = reactive({
  page: 1,
  limit: 10,
  patientId: undefined,
  orderStatus: undefined
})

const fetchOrderList = async () => {
  loading.value = true
  try {
    await memberStore.fetchOrderList(pageParams)
  } catch (error) {
    ElMessage.error(error.message)
  } finally {
    loading.value = false
  }
}

const fetchPersonList = async () => {
  try {
    await memberStore.fetchPersonList()
  } catch (error) {
    ElMessage.error(error.message)

  }
}
const fetchOrderStatus = async () => {
  try {
    await memberStore.fetchOrderStatus()
  } catch (error) {
    ElMessage.error(error.message)
  }
}
const handleSizeChange = (size: number) => {
  pageParams.limit = size
  fetchOrderList()
}
const handleCurrentChange = (page) => {
  pageParams.page = page
  fetchOrderList()
}

const handlePatientId = () => {
  fetchOrderList()
}

const handleOrderStatus = () => {
  fetchOrderList()
}

onMounted(() => {
  fetchOrderList()
  fetchPersonList()
  fetchOrderStatus()
})

</script>

<template>
  <div class="table">
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <el-link type="primary">挂号订单</el-link>
        </div>
      </template>
      <el-form inline>
        <el-form-item label="就诊人">
          <el-select v-model="pageParams.patientId" placeholder="选择就诊人" @change="handlePatientId">
            <el-option v-for="(item,index) in personList" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="pageParams.orderStatus" placeholder="选择订单状态" @change="handleOrderStatus">
            <el-option v-for="(item,index) in orderStatusList" :value="item.status" :label="item.comment" :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-table border :data="orderListInfo.records" stripe v-loading="loading" element-loading-text="数据加载中" element-loading-background="rgb(255, 255, 255)">
        <el-table-column label="就诊时间" align="center" prop="reserveDate"></el-table-column>
        <el-table-column label="医院" align="center" prop="hosname"></el-table-column>
        <el-table-column label="科室" align="center" prop="depname"></el-table-column>
        <el-table-column label="职称" align="center" prop="title"></el-table-column>
        <el-table-column label="服务费" align="center" prop="amount"></el-table-column>
        <el-table-column label="就诊人" align="center" prop="patientName"></el-table-column>
        <el-table-column label="订单状态" align="center" prop="param.orderStatusString"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button size="small" type="primary" @click="$router.push({path:'/member/order',query:{orderId:row.id}})">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          small
          v-model:current-page="pageParams.page"
          v-model:page-size="pageParams.limit"
          :total="Number(orderListInfo?.total)"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.table {
  .el-table {
    margin: 10px 0;
  }

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
</style>
